<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
    <title>散点图</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        html,
        body,
        #echarts-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-extension-mbmap@1.0.0/dist/echarts-extension-mbmap.js"></script>

    <!-- <script type="application/javascript" src="./lib/echarts.js"></script> -->
    <!-- <script type="application/javascript" src="../dist/echarts-extension-mbmap.js"></script> -->
    <script type="application/javascript" src="./weibo.js"></script>
</head>

<body>
    <div id="echarts-container"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1Ijoid2xmZWkiLCJhIjoiY2puMTB6MXZlNHZjcTNwbnl3dnowYjhoaSJ9.s6ZkjRHGIY6xVNBRAf52MQ';

        var myChart = echarts.init(document.getElementById('echarts-container'));

        let option = {
            // 取消动画、保持与地图同步移动
            animation: false,
            tmap: {
                center: [120.13066322374, 30.240018034923],
                zoom: 3,
                roam: true,
                style: 'mapbox://styles/mapbox/navigation-night-v1'
            },
            series: [{
                name: 'pm2.5',
                type: 'scatter',
                coordinateSystem: 'tmap',
                data: convertData(data),
                symbolSize: function (val) {
                    return val[2] / 10;
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#ddb926'
                    }
                }
            }, {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'tmap',
                data: convertData(data.sort(function (a, b) {
                    return b.value - a.value;
                }).slice(0, 6)),
                symbolSize: function (val) {
                    return val[2] / 10;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#f4e925',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                zlevel: 1
            }]
        }

        myChart.setOption(option);
    </script>
</body>

</html>